<template>
    <el-card>
        <el-row>
            <el-col :span="18">
                <!-- 里程碑统计 -->
                <el-card title="里程碑">
                    <div id="milestone" ref="refMilestone"></div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <div id="intro-swiper" class="simple-swiper-container">
                    <span id="prev" class="btn btn-prev">
                        <el-icon size="32">
                            <ArrowLeft />
                        </el-icon>
                    </span>
                    <span id="next" class="btn btn-next">
                        <el-icon size="32">
                            <ArrowRight />
                        </el-icon>
                    </span>
                    <div class="swiper-wrapper">
                        <div class="swiper-items">
                            <img src="../../assets/image/swiper01.webp" alt="">
                        </div>
                        <div class="swiper-items">
                            <img src="../../assets/image/swiper02.webp" alt="">
                        </div>
                    </div>
                    <div class="pagehelper pagination"></div>
                </div>
            </el-col>
        </el-row>
    </el-card>
</template>
<script setup>
import JSwiper from '@/tool/lib/swiper.min.js';
import { nextTick, onMounted, ref } from 'vue';
import * as echarts from 'echarts'; ''
const refMilestone = ref(null);
nextTick(() => {
    new JSwiper("#intro-swiper", {
        loop: true,
        button: {
            prev: "#prev", // 前进后退按钮
            next: "#next"
        },
        gap: 2,
        easing: "ease"
    })
});
// 中单完成度占比
function all_complete_percent() {
    if (refMilestone.value) {
        console.log('init')
        const data = echarts.init(refMilestone.value);
        data.setOption({
            title: {
                text: "案例"
            },
            xAxis: {
                data: ["第一个", "第二个", "第三个"]
            },
            yAxis: {
                data: [1, 2, 3, 4, 5, 6]
            },
            series: [
                {
                    name: "小动物",
                    type: "bar",
                    data: [1, 2, 3, 4, 5, 6, 6, 7, 8]
                }
            ]
        })
    }
}

onMounted(() => {
    all_complete_percent();
});

</script>
<style scoped lang="scss">
@import url("@/tool/lib/swiper.min.css");

#milestone {
    width: 400px;
    height: 400px;
}

#intro-swiper {
    width: 100%;
    height: 680px;
    border-radius: 20px;
    position: relative;

    .swiper-wrapper {
        height: 100%;

        .swiper-slider {
            height: 100%;
        }
    }

    img {
        width: 100%;
        height: 100%;
    }

    #prev,
    #next {
        background-color: rgba(0, 0, 0, 0.76);
        border-radius: 30px;
        background-image: none;
        width: 60px;
        height: 60px;
    }
}
</style>